<template>
  <div class="login-box">
    <newNav :selNum="selNum"/>
    <div class="login-home">
      <img class="login-img" src="../assets/icon-board.svg" alt="">
      <div class="login-text1">Metaboard</div>
      <!-- <div class="login-text2" v-if="showLogin">仅需0.5ETH，开启您的新时代DeFI之旅{{$t('user.Checktheaccount')}}</div> -->
      <div class="login-btn" v-if="!showLogin" @click="login">{{$t('user.Authorizedto')}}</div>
      <div class="login-btn" v-else @click="buy">{{$t('user.Registered')}}</div>
      <div class="login-text3" v-if="!showLogin">{{$t('user.Checktheaccount')}}</div>
      <div class="login-text4" v-if="!showLogin">{{$t('user.authorizecorrectaddress')}}</div>
      <div class="login-text4" v-if="showLogin">{{$t('user.home_input_p')}}</div>      
      <div class="login-input">
        <input type="text" v-if="!showLogin" v-model="checkAddress">
        <input type="text" v-else v-model="invitationAddress">
        <div class="btn-right" @click="check" v-if="!showLogin">{{$t('user.Toview')}}</div>
        <div class="btn-right" @click="confirm" v-else>{{$t('user.Confirm')}}</div>
      </div>
    </div>
    <spin v-if="showSpin"></spin>
    <popup v-if="showpopup" :data="dataProp" @close="close" @submit="submit"></popup>
    <div class="bottom-bai">
      <homeBottom></homeBottom>
    </div>
  </div>
</template>

<script>
import homeBottom from '../components/public/homeBottom'
import newNav from '../components/newNav'
import Web3 from 'web3'
import spin from '../components/public/spin'
import popup from '../components/public/popup'
export default {
  name: 'metaboardLogin',
  data () {
    return {
      showLogin:false,
      userAddress:'',
      invitationAddress:'',
      checkAddress:'',
      showSpin:false,
      showpopup:false,
      dataProp:{type:4,address:''},
      selNum:'',
      selNum:1,
      myContract:''
    }
  },  
  components:{spin,popup,homeBottom,newNav},
  mounted() {   
    var that = this;
    if (typeof web3 !== 'undefined') {
      web3 = new Web3(web3.currentProvider);
    } else {
        web3 = new Web3(new Web3.providers.HttpProvider(this.utils.HttpProviderIp));
    } 
    this.myContract = new web3.eth.Contract(that.utils.tranAbi, that.utils.addressVal, {
        from: that.utils.tranPersonVal, // default from address
        gasPrice: '10000000000' // default gas price in wei, 10 gwei in this case
    });
    if(this.$route.params.id){
      this.checkAddress = this.$route.params.id;
    }                            
  },
  methods: {
    //关闭弹框
    close(data){
      this.showpopup = false;
    },
    //确认邀请码弹框
    confirm(){
      this.showpopup = true;
      this.dataProp.address = this.invitationAddress;
    },
    //确认邀请码
    submit(){
      var that = this;
      if(that.invitationAddress && that.invitationAddress.length == 42){
        that.myContract.methods.GetUserInfo(that.invitationAddress).call(function(error, result){
          if(result[0]){
            that.$message.info(that.$t('user.Waladdresscorrect'));
            that.showpopup = false;
          }else{
            that.$message.info(that.$t('user.Pleaentercorrect'));
            that.showpopup = false;
          }
          if(error){
            that.$message.info(that.$t('user.Pleaentercorrect'));
            that.showpopup = false;
          }
        });
      }else{
        that.myContract.methods.PETH_ID_To_Address(that.invitationAddress).call(function(error, res){
          that.myContract.methods.GetUserInfo(res).call(function(error, result){
            if(result[0]){
              that.$message.info(that.$t('user.Waladdresscorrect'));
              that.showpopup = false;
            }else{
              that.$message.info(that.$t('user.Pleaentercorrect'));
              that.showpopup = false;
            }
            if(error){
              that.$message.info(that.$t('user.Pleaentercorrect'));
              that.showpopup = false;
            }
          });
        });
      }
    },
    //查看其他用户
    check(){
      var that = this;  
      if(that.checkAddress && that.checkAddress.length == 42){
        that.myContract.methods.GetUserInfo(that.checkAddress).call(function(error, result){
          if(result[0]){
            that.myContract.methods.PETH_Address_To_ID(that.checkAddress).call(function(error, res){
              if(res){
                that.$router.push('/metaboard/'+res);
              }  
            })
          }else{
            that.$message.info(that.$t('user.Pleaentercorrect'));
          }
        });
      }else if(that.checkAddress && that.checkAddress.length != 42){  
        that.myContract.methods.PETH_ID_To_Address(that.checkAddress).call(function(error, result){
          if(result){
            that.myContract.methods.GetUserInfo(result).call(function(error, res){
              if(res[0]){
                that.$router.push('/metaboard/'+that.checkAddress);                
              }else{
                that.$message.error(that.$t('user.Pleaentercorrect'));
              }
            });
          }          
        });
      }else{        
        that.$message.error(that.$t('user.Pleaentercorrect'));
      }
    },
    //授权登录
    login(){
      var that = this;
      //检测当前浏览器是否以太坊兼容，并进行相应的处理
      if (typeof window.ethereum === 'undefined') {
        this.$message.info('浏览器不兼容')
      } else {
        //如果用户安装了MetaMask，你可以要求他们授权应用登录并获取其账号
        ethereum.enable()
        //如果用户拒绝了登录请求
        .catch(function (reason) {
            if (reason === 'User rejected provider access') {
                // 用户不想登录，你看该怎么办？
                return
            } else {
                // 本不该执行到这里，但是真到这里了，说明发生了意外
                this.$message.info('There was an issue signing you in.')
            }
        })
        //如果用户同意了登录请求，你就可以拿到用户的账号
        .then(function (accounts) {
          //一旦获取了用户账号，你就可以签名交易
          that.userAddress = accounts[0];       
          that.myContract.methods.GetUserInfo(that.userAddress).call(function(error, result){
            if(result[0]){
              that.$router.push('/metaboard');
            }else{
              that.showLogin = true;
            }
            if(error){
              that.$message.info(error);
            }
          });
        })
      } 
    },
    //注册
    async buy(){
    var that = this;  
      ethereum.enable().then(accounts => {
        const account = accounts[0];                 
        if(localStorage.getItem(account)){
          that.$message.info(that.$t('user.partner_d1'));
        }else{
          var myContract = new web3.eth.Contract(that.utils.tranAbi, that.utils.addressVal, {
              from: account, // default from address
              // gasPrice: '50000000000', // default gas price in wei, 10 gwei in this case
              // gas: '0x50000'
          });
          if(that.invitationAddress == ''){
            myContract.methods.Register(that.utils.tranPersonVal).send(function(error, result){
              if(result){                
                that.showSpin = true;
                localStorage.setItem(account,result);
                var setinter = setInterval(()=>{
                  myContract.methods.GetUserInfo(account).call(function(error, result){
                    if(result[0]){                
                      that.showSpin = false;
                      clearInterval(setinter);
                      that.$router.push('/metaboard');
                    }
                  });
                },5000)
              }
            });
          }else{
            if(that.invitationAddress.length!=42){
              myContract.methods.PETH_ID_To_Address(that.invitationAddress).call(function(error, res){
                if(res){   
                  var address = res;
                  myContract.methods.GetUserInfo(address).call(function(error, result){
                    if(result[0]){              
                      myContract.methods.Register(address).send(function(error, result){
                        if(result){
                          that.showSpin = true;
                          localStorage.setItem(account,result);
                          var setinter = setInterval(()=>{
                            myContract.methods.GetUserInfo(account).call(function(error, result){
                              if(result[0]){
                                clearInterval(setinter);
                                that.$router.push('/metaboard');
                              }
                            });
                          },5000)
                        }
                      });
                    }else{
                      that.$message.info(that.$t('user.Pleaentercorrect'));
                    }
                  });
                }else{
                  that.$message.info(that.$t('user.Pleaentercorrect'));
                }
                if(error){
                  that.$message.info(that.$t('user.Pleaentercorrect'));
                }
              });
            }else{
              myContract.methods.GetUserInfo(that.invitationAddress).call(function(error, result){
                if(result[0]){              
                  myContract.methods.Register(that.invitationAddress).send(function(error, result){
                    if(result){
                      that.showSpin = true;
                      localStorage.setItem(account,result);
                      var setinter = setInterval(()=>{
                        myContract.methods.GetUserInfo(account).call(function(error, result){
                          if(result[0]){
                            clearInterval(setinter);
                            that.$router.push('/metaboard');
                          }
                        });
                      },5000)
                    }
                  });
                }else{
                  that.$message.info(that.$t('user.Pleaentercorrect'));
                }
              });
            }
          }
        }     
      })
    }
  }
}
</script>

<style scoped lang="scss">

@media only screen and (min-width: 0px) and (max-width: 639px){
  .login-box{
    width: 100%;
    padding-top: 60px;
    .bottom-bai{
      width: 100%;
      margin: 0 auto;
      padding-top:80px;
      padding-bottom: 20px;
    }
    .login-home{
      width: 86%;
      margin: 0 auto;
      margin-top: 62px;
      margin-bottom: 56px;
      background-color: #181818;
      border-radius: 12px;
      padding-bottom: 60px;
      .login-img{
        width: 32px;
        margin-top: 30px;
        margin-bottom: 15px;
      }
      .login-text1{
        font-size: 36px;
        margin-bottom: 15px;
      }
      .login-text2{
        font-size: 14px;
        color: rgba(255, 255, 255, .7);
        margin-bottom: 20px;
      }
      .login-btn{
        width: 180px;
        height: 40px;
        line-height: 40px;
        margin: 0 auto;
        font-size: 16px;
        background-color: #EFB234;
        font-weight: bold;
        border-radius: 10px;
        color: #000;
        margin-bottom: 50px;
        cursor: pointer;
      }
      .login-text3{
        font-size: 16px;
        color: rgba(255, 255, 255, .7);
        margin-bottom: 15px;
      }
      .login-text4{
        font-size: 14px;
        color: rgba(255, 255, 255, .5);
        margin-bottom: 15px;
      }
      .login-input{
        width: 260px;
        height: 40px;
        margin: 0 auto;
        background-color: #626262;
        border-radius: 10px;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        input{
          width: 180px;
          height: 100%;
          border: none;
          background: rgba(0,0,0,0);
          padding-left: 15px;
          outline: none;
        }
        >.btn-right{
          width: calc(100% - 180px);
          height: 40px;
          line-height: 40px;
          background-color: #fff;
          border-radius: 10px;
          color: #000;
          font-weight: bold;
          cursor: pointer;
        }
      }
    }
  }
}


@media only screen and (min-width: 640px) {
  .login-box{
    padding-top: 90px;
    .bottom-bai{
      width: 1200px;
      margin: 0 auto;
      padding-top:80px;
      padding-bottom: 20px;
    }
    .login-home{
      width: 680px;
      margin: 0 auto;
      margin-top: 62px;
      margin-bottom: 56px;
      background-color: #181818;
      border-radius: 12px;
      padding-bottom: 110px;
      .login-img{
        width: 46px;
        margin-top: 40px;
        margin-bottom: 20px;
      }
      .login-text1{
        font-size: 40px;
        margin-bottom: 20px;
      }
      .login-text2{
        font-size: 16px;
        color: rgba(255, 255, 255, .7);
        margin-bottom: 30px;
      }
      .login-btn{
        width: 180px;
        height: 40px;
        line-height: 40px;
        margin: 0 auto;
        font-size: 18px;
        background-color: #EFB234;
        font-weight: bold;
        border-radius: 10px;
        color: #000;
        margin-bottom: 70px;
        cursor: pointer;
      }
      .login-text3{
        font-size: 20px;
        color: rgba(255, 255, 255, .7);
        margin-bottom: 20px;
      }
      .login-text4{
        font-size: 14px;
        color: rgba(255, 255, 255, .5);
        margin-bottom: 20px;
      }
      .login-input{
        width: 300px;
        height: 40px;
        margin: 0 auto;
        background-color: #626262;
        border-radius: 10px;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        input{
          width: 200px;
          height: 100%;
          border: none;
          background: rgba(0,0,0,0);
          padding-left: 15px;
          outline: none;
        }
        >.btn-right{
          width: calc(100% - 200px);
          height: 40px;
          line-height: 40px;
          background-color: #fff;
          border-radius: 10px;
          color: #000;
          font-weight: bold;
          cursor: pointer;
        }
      }
    }
  }
}

</style>
